<template>
  <lay-form :model="loginForm" ref="layFormRef" :rules="rules" class="loginForm">
    <lay-form-item prop="username">
      <lay-input placeholder="请输入工号" v-model="loginForm.username">
        <template #prepend><lay-icon type="layui-icon-user"></lay-icon></template>
      </lay-input>
    </lay-form-item>
    <lay-form-item prop="password">
      <lay-input placeholder="请输入密码" password type="password" v-model="loginForm.password">
        <template #prepend><lay-icon type="layui-icon-password"></lay-icon></template>
      </lay-input>
    </lay-form-item>
    <lay-form-item>
      <lay-row space="20">
        <lay-col md="24">
          <lay-button type="normal" :fluid="true" @click="loginSubmit">登录</lay-button>
        </lay-col>
      </lay-row>
      <lay-row space="10">
        <lay-col md="8"></lay-col>
        <lay-col md="14">
          <a @click="router.push('/user/register')" style="margin-right: 10px">立即注册</a>
          <span>|</span>
          <a @click="router.push('/user/fundPwd')" style="margin-left: 10px">忘记密码</a>
        </lay-col>
        <lay-col md="2"></lay-col>
      </lay-row>
    </lay-form-item>
  </lay-form>
  <lay-line id="error_message">{{error_message}}</lay-line>
</template>

<script lang="ts">
export default {
    name: "userLogin"
}
</script>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {passwordEncryption, userStore} from "../../store/user";
import {login} from "../../api/module/user";
import {useRouter} from "vue-router";
import {layer} from "@layui/layer-vue";
import {notify} from "../../untils/tip";

const router = useRouter();
const user = userStore();
const layFormRef = ref();
const loginForm = reactive({username: "", password: ""})
const error_message = ref("");

const rules = ref({
  username : {
    type :  'string',
    min : 3,
    max : 20
  },
  password : {
    type :  'string',
    min : 6,
    max : 20
  }
})

const loginSubmit = async () => {
    const flag = ref(false);
    layFormRef.value.validate((isValidate: boolean, model: any, errors: any) => {
      if(!isValidate){
        notify('failed', 'errors:' + JSON.stringify(errors))
      }else {
        flag.value = true;
      }
    });
    if(flag.value){
      //md5加密后的密码
      const pwd = passwordEncryption(loginForm.password);
      const loginForm_new = reactive({user_no: loginForm.username, password: pwd})
      console.log('loginForm:' + `${JSON.stringify(loginForm_new)}`)
      let {result, status, message} = await login(loginForm_new);
      console.log(status)
      if (status === 'success') {
          error_message.value = "";
          user.token = result.token;
          user.userInfo = loginForm_new;
          console.log(result.token)
          localStorage.setItem('user_detail', JSON.stringify(loginForm_new));
          // localStorage.setItem('token', result.token);
          // localStorage.setItem('userInfo', JSON.stringify(loginForm_new));
          router.push('/home');
      } else {
          layer.msg(message);
      }
    }
}

</script>

<style scoped>
.loginForm {
    width: 350px;
}
</style>